<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增学区')" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#l-map{height:500px;width:100%;}
		
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=8GxIGdT8YjvVW4tnFNSdNOXLj8klQxHq"></script>
	<title>关键字输入提示词条</title>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
         <form class="form-horizontal m" id="form-school-edit" th:object="${school}">
        <input id="id" name="id" th:field="*{id}"  type="hidden">
        <h4 class="form-header h4">基本信息</h4>
			<div class="form-group">	
				<label class="col-sm-2 control-label">学区名称：</label>
				<div class="col-sm-3">
					<input id="schoolName" name="schoolName" class="form-control" type="text" th:field="*{schoolName}">
				</div>
				
				<label class="col-sm-2 control-label">学校电话：</label>
				<div class="col-sm-3">
					<input id="tel" name="tel" class="form-control" type="text" th:field="*{tel}">
				</div>
			</div>
			
			
			
			
			
			
			 <h4 class="form-header h4">地址信息</h4>




			<label class="col-sm-2 control-label">请输入学区名称:</label>
			<div id="r-result" class="col-sm-3">
				<input type="text" id="suggestId" size="20" class="form-control" />
			</div>
			<div id="searchResultPanel"
				style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
			<br /> <br /> <br />
			<div id="l-map"></div>
			<br />





			<div class="form-group">	
				<label class="col-sm-2 control-label">经度：</label>
				<div class="col-sm-3">
					<input id="schoolJd" name="schoolJd" class="form-control" type="text" th:field="*{schoolJd}" readonly>
				</div>
				
				<label class="col-sm-2 control-label">纬度：</label>
				<div class="col-sm-3">
					<input id="schoolWd" name="schoolWd" class="form-control" type="text" th:field="*{schoolWd}" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-2 control-label">省：</label>
				<div class="col-sm-3">
					<input id="province" name="province" class="form-control" type="text" th:field="*{province}" readonly>
				</div>
			
				<label class="col-sm-2 control-label">市：</label>
				<div class="col-sm-3">
					<input id="city" name="city" class="form-control" type="text" th:field="*{city}" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-2 control-label">区：</label>
				<div class="col-sm-3">
					<input id="area" name="area" class="form-control" type="text" th:field="*{area}" readonly>
				</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-2 control-label">学校地址：</label>
				<div class="col-sm-8">
					<input id="schoolAddress" name="schoolAddress" class="form-control" type="text" th:field="*{schoolAddress}">
				</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-2 control-label">校区配送费：</label>
				<div class="col-sm-8">
					<input id="startFee" name="startFee" th:field="*{startFee}" class="form-control" type="number">
				</div>
			</div>
			
			<h4 class="form-header h4">改动信息</h4>
			<div class="form-group">	
				<label class="col-sm-2 control-label">创建时间：</label>
				<div class="col-sm-3">
					<input id="creactDate" name="creactDate" th:field="*{creactDate}" class="form-control" type="text" readonly>
				</div>
				
				<label class="col-sm-2 control-label">修改时间：</label>
				<div class="col-sm-3">
					<input id="modifyDate" name="modifyDate" th:field="*{modifyDate}" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-2 control-label">创建用户：</label>
				<div class="col-sm-3">
					<input id="createBy" name="createBy" th:field="*{createBy}" class="form-control" type="text" readonly>
				</div>
				
				<label class="col-sm-2 control-label">修改用户：</label>
				<div class="col-sm-3">
					<input id="modifyBy" name="modifyBy" th:field="*{modifyBy}" class="form-control" type="text" readonly>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
    var prefix = ctx + "School/school";
	$("#form-school-edit").validate({
		rules:{
			xxxx:{
				required:true,
			},
		},
		focusCleanup: true
	});
	
	function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-school-edit').serialize());
        }
    }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		// 百度地图API功能
		function G(id) {
			return document.getElementById(id);
		}

		var map = new BMap.Map("l-map");
		var geoc = new BMap.Geocoder();
		map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

		var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
			{"input" : "suggestId"
			,"location" : map
		});

		ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
		var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});

		var myValue;
		ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
		var _value = e.item.value;
			myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			
			setPlace();
		});

		function setPlace(){
			map.clearOverlays();    //清除地图上所有覆盖物
			function myFun(){
				var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp));    //添加标注
			}
			var local = new BMap.LocalSearch(map, { //智能搜索
			  onSearchComplete: myFun
			});
			local.search(myValue);
		}
		
		map.addEventListener("click", showInfo);
		
	    
	    /* map.enableScrollWheelZoom(true); */
		//点击地图时间处理
		  function showInfo(e) {
		    document.getElementById('schoolJd').value = e.point.lng;
		    document.getElementById('schoolWd').value = e.point.lat;
		      geoc.getLocation(e.point, function (rs) {
		      var addComp = rs.addressComponents;
		      var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
		      if (confirm("确定要地址是" + address + "?")) {
		        /* document.getElementById('allmap').style.display = 'none'; */
		        document.getElementById('schoolAddress').value = address;
		        document.getElementById('province').value = addComp.province;
		        document.getElementById('city').value = addComp.city;
		        document.getElementById('area').value = addComp.district;		        
		      }
		    });		     
		  }
	</script>
</body>
</html>
